<script setup>
import StatsCards from './components/StatsCards.vue'
import OrderTrendChart from './components/OrderTrendChart.vue'
import QuickEntry from './components/QuickEntry.vue'
import NoticeBoard from './components/NoticeBoard.vue'

const stats = [
  {
    title: '用户量',
    value: '2,000',
    subTitle: '总用户量',
    subValue: '120,000',
    icon: 'el-icon-user',
    iconBg: '#e8f0fe'
  },
  {
    title: '访问量',
    value: '20,000',
    subTitle: '总访问量',
    subValue: '500,000',
    icon: 'el-icon-pie-chart',
    iconBg: '#fbeee6'
  },
  {
    title: '下载量',
    value: '8,000',
    subTitle: '总下载量',
    subValue: '120,000',
    icon: 'el-icon-download',
    iconBg: '#e6f7f1'
  },
  {
    title: '使用量',
    value: '5,000',
    subTitle: '总使用量',
    subValue: '50,000',
    icon: 'el-icon-timer',
    iconBg: '#f6f7fa'
  }
]
</script>

<template>
  <div class="dashboard-wrapper">
    <StatsCards :stats="stats" />
    <el-row :gutter="20" class="dashboard-main" style="flex:1;min-height:0;height:100%;">
      <el-col :span="16" style="height:100%">
        <el-card shadow="never" style="height:100%">
          <OrderTrendChart />
        </el-card>
      </el-col>
      <el-col :span="8" style="height:100%">
        <el-card shadow="never" style="height:100%">
          <QuickEntry />
          <NoticeBoard />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.dashboard-header {
  margin-bottom: 18px;
}

.dashboard-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 4px;
}

.dashboard-subtitle {
  color: #888;
  font-size: 15px;
}

.dashboard-main {
  flex: 1;
  min-height: 0;
  margin-top: 0;
}
</style>